<template>
  <div v-if="currentNodeType === 'IP'" class="IPBox">
    <div class="title">
      <img :src="src" alt="" height="30px" class="pointer" />
      <span class="header pointer">{{ currentNode.carriedInfo.ip }}</span>
    </div>
    <p class="name">基本属性</p>
    <div class="desc">
      <div class="desc-title">应用场景:</div>
      <div class="desc_content">{{ currentNode.carriedInfo.appScenario }}</div>
    </div>
    <div class="desc">
      <div class="desc-title">ASN:</div>
      <div class="desc_content">{{ currentNode.carriedInfo.asn }}</div>
    </div>
    <div class="desc">
      <div class="desc-title">首次域名指向:</div>
      <div class="desc_content">{{ currentNode.carriedInfo.domainFirst }}</div>
    </div>
    <div class="desc">
      <div class="desc-title">末次域名指向:</div>
      <div class="desc_content">{{ currentNode.carriedInfo.domainNot }}</div>
    </div>
    <div class="desc">
      <div class="desc-title">地理位置:</div>
      <div class="desc_content">{{ currentNode.carriedInfo.location }}</div>
    </div>
    <div class="desc">
      <div class="desc-title">当前开放端口:</div>
      <div class="desc_content">{{ currentNode.carriedInfo.port }}</div>
    </div>
    <p class="name">关系拓展</p>
    <div class="Relationship" v-if="currentNode.carriedInfo.certificateNum">
      <div class="center">
        <img :src="ipCertificate" alt="" class="relationIcon" />
        <span>绑定IP证书</span>
      </div>
      <div class="center">
        <span class="marginRight">{{ currentNode.carriedInfo.certificate.length }}/{{ currentNode.carriedInfo.certificateNum }}</span>
        <span class="marginRight">|</span>
        <el-icon>
          <Share />
        </el-icon>
      </div>
    </div>
    <div class="Relationship" v-if="currentNode.carriedInfo.portNum">
      <div class="center">
        <img :src="ipPort" alt="" class="relationIcon" />
        <span>IP开放端口</span>
      </div>
      <div class="center">
        <span class="marginRight">{{ currentNode.carriedInfo.port.length }}/{{ currentNode.carriedInfo.portNum }}</span>
        <span class="marginRight">|</span>
        <el-icon>
          <Share />
        </el-icon>
      </div>
    </div>

    <div class="Relationship" v-if="currentNode.carriedInfo.html_favicon">
      <div class="center">
        <img :src="webIcon" alt="" class="relationIcon" />
        <span>网页图标</span>
      </div>
      <div class="center">
        <span class="marginRight">{{ currentNode.carriedInfo.html_favicon.length }}/{{ currentNode.carriedInfo.html_faviconNum }}</span>
        <span class="marginRight">|</span>
        <el-icon>
          <Share />
        </el-icon>
      </div>
    </div>
    <div class="Relationship" v-if="currentNode.carriedInfo.html_title">
      <div class="center">
        <img :src="htmlIcon" alt="" class="relationIcon" />
        <span>网页标题</span>
      </div>
      <div class="center">
        <span class="marginRight">{{ currentNode.carriedInfo.html_title.length }}/{{ currentNode.carriedInfo.html_titleNum }}</span>
        <span class="marginRight">|</span>
        <el-icon>
          <Share />
        </el-icon>
      </div>
    </div>
  </div>
  
  <div v-if="['PORT', 'CERTIFICATE', 'HTML_FAVICON', 'HTML_TITLE','domain', 'ipv4', 'ipv6'].includes(currentNodeType)" class="LeaderBox">
    <div class="top">
      <img :src="currentNode.icon" alt="" style="width: 2rem" />
      <h3>{{ currentNode.nodeId }}</h3>
    </div>
    <div style="margin: 1rem 0 2rem 0">
      <span>关联数量：{{ currentNode.childCount?currentNode.childCount:"--" }}</span>
    </div>
    <div>
      <div>
        <span>||</span>
        <span>已经拓展实体数量：{{ currentNode.Child.length }}</span>
      </div>

      <ul class="listBox">
        <li v-for="(child, index) in currentNode.Child" :key="index" class="list_item">
          <span>{{ child }}</span>
          <hr />
        </li>
      </ul>
    </div>
  </div>
  <div v-if="['port', 'certificate', 'html_favicon', 'html_title'].includes(currentNodeType)" class="Leavel_3_Box">
    <div class="top">
      <img :src="currentNode.icon" alt="" style="width: 2rem" />
      <h3>{{ currentNode.nodeId }}</h3>
    </div>
    <div style="margin: 1rem 0 2rem 0">
      <!-- <button>测试</button>
      <button>测试</button>
      <button>测试</button> -->
    </div>
    <div>
      <div>
        <span>||</span>
        <span>关系拓展</span>
      </div>

      <div class="Relationship" v-if="currentNode.SonCount?.ipv4Count > 0">
        <div class="center">
          <img :src="ipPort" alt="" class="relationIcon" />
          <span>IP开放端口</span>
        </div>
        <div class="center">
          <span class="marginRight">{{ currentNode.Child? currentNode.Child.length : 0}}/{{ currentNode.SonCount.ipv4Count }}</span>
          <span class="marginRight">|</span>
          <el-icon>
            <Share />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElIcon } from 'element-plus'
import {Share} from '@element-plus/icons-vue'
import src from '@/assets/images/china.png'
import { assignObject } from '@/utils/object'

import nullBox from '@/assets/icon/null.png'
import Ip from '@/assets/icon/bin_ip.png'
import china from '@/assets/images/china.png'
import ipPort from '@/assets/icon/ip_port.png'
import ipCertificate from '@/assets/icon/bin_ip_certificate.png'
import webIcon from '@/assets/icon/web_icon.png'
import htmlIcon from '@/assets/icon/icon_hash.png'
import expand from '@/assets/icon/expand_downward.png'

import IPbox from './sonPage/IPbox.vue'

const currentNode=ref()
const currentNodeType = ref()
const DataUpdate = (value: any) => {
  console.log(value);
  currentNode.value=value
  currentNodeType.value = value.node_type
}
const inValue=ref('1.172.179.239')
const emit = defineEmits(['goSearch'])
const gosearch=()=>{
  emit('goSearch', inValue.value)
}
defineExpose({ DataUpdate })
</script>
<style scoped lang="scss">
.search{
  margin-bottom: 1rem;
}
.IPBox {
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;

    .header {
      font-weight: 700;
      font-size: 1.25rem;
    }

    .ico {
      font-weight: 700;
      font-size: 1.25rem;
      margin-right: 0.3125rem;
    }
  }

  .desc {
    display: flex;
    align-items: center;
    margin-bottom: 0.9375rem;

    .desc-title {
      width: 7.5rem;
      font-size: 1.125rem;
      margin-right: 0.625rem;
    }

    .icon {
      font-size: 1.25rem;
      color: var(--el-color-primary);
      font-weight: 700;
      margin-right: 0.3125rem;
    }
  }

  .Relationship {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9375rem;

    .icon {
      font-size: 1.25rem;
      color: var(--el-color-primary);
      font-weight: 700;
      margin-right: 0.3125rem;
    }

    .relationIcon {
      vertical-align: middle;
      width: 1.25rem;
      margin-right: 0.3125rem;
    }
  }

  .name {
    font-size: 1.125rem;
    font-weight: 600;
    margin-right: 0.625rem;
    margin-bottom: 0.9375rem;
  }
}

.LeaderBox {
  .top {
    display: flex;
    align-items: center;
  }

  .listBox {
    margin-left: 1rem;
    width: 200px; /* 根据需要设置合适的宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 禁止文本换行 */
  }

  .list_item {
    margin: 1rem 0;
    max-width: 100%; /* 根据需要设置最大宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 使用省略号显示溢出的文本 */
  }
}

.Leavel_3_Box {
  .top {
    display: flex;
    align-items: center;
    width: 100%; /* 根据需要设置合适的宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 禁止文本换行 */
    h3{
      display: inline-block; /* 使元素 inline-block 以适应宽度 */
      max-width: 100%; /* 根据需要设置最大宽度 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 使用省略号显示溢出的文本 */
    }
  }
  .Relationship {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9375rem;

    .icon {
      font-size: 1.25rem;
      color: var(--el-color-primary);
      font-weight: 700;
      margin-right: 0.3125rem;
    }

    .relationIcon {
      vertical-align: middle;
      width: 1.25rem;
      margin-right: 0.3125rem;
    }
  }
}
</style>
